<template>
    <div class="food_list">
        <el-input v-model="search" placeholder="请输入名称" clearable @change="getCookList"></el-input>
        <div v-for="item in cookList" :key="item.id" class="food-item" @click="handleRowClick(item.id)" :style="{ backgroundImage: 'url(' + item.image + ')' }">
            <div class="text">{{ item.name }}</div>
            <div class="mark"></div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from "vue-router"
import { getCookAll } from './api.js'
const cookList = ref([])
const router = useRouter()
const search = ref('')
const tloading = ref(false)
onMounted(() => {
    getCookList()
})
const getCookList = () => {
    tloading.value = true
    getCookAll().then(res => {
        tloading.value = false
        cookList.value = res.result
        cookList.value = cookList.value.filter(row => row.name.includes(search.value))
    })
}

const handleRowClick = (id) => {
    console.log(id);
    router.push({
        path: '/database/cookinfo',
        query: { id: id }
    })
}
</script>
<style lang="scss" scoped>
.food_list {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 5px;

    ::v-deep .el-input__wrapper {
        border-radius: 20px;
    }
}

.food-item {
    height: 80px;
    width: 80px;
    margin: 10px;
    border-radius: 20px;
    // background-image: url("@/assets/猪肉.jpg");
    // background: rgba(0, 0, 0, 0.37), url("./猪肉.jpg");
    // opacity: 0.6;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: #fff;
    // text-align: center;
    position: relative;

    .text {
        font-size: 15px;
        font-weight: 500;
        // font-weight: bold;
        position: absolute;
        width: 100%;
        bottom: 10px;
        z-index: 99;
        color: #fff;
        // background-color: rgba(0, 0, 0, 0.4);
    }

    .mark {
        border-radius: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        // 线性渐变
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(187, 23, 23, 0.4) 100%);
    }
}
</style>